<template>
  <!-- 这里是宝贝详情页面 -->
  <el-card>
    <div>产品参数</div>
    <!-- 分割线 -->
    <el-divider class="divide"></el-divider>
    <!-- 产品参数信息 -->
    <div style="color: rgb(192, 192, 192)">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <span>店铺名：{{commodityList.storeName}}</span>
            <br />
            <span>厂址：望云楼实训室4</span>
            <br />
            <span>生产日期：{{commodityList.createdTime}}</span>
            <br />
            <span>保质期：450 天</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <span>品牌：Lotte</span>
            <br />
            <span>系列：小熊饼干218g</span>
            <br />
            <span>口味：巧克力味</span>
            <br />
            <span>产地：泰国</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <span>商品条形码：8852008302462</span>
            <br />
            <span>包装方式：包装</span>
            <br />
            <span>是否进口：进口</span>
            <br />
            <span>糕点种类：{{ commodityList.commodityTypeName }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 商品细节 -->
    <div style="margin-top: 2rem">商品细节</div>
    <el-divider class="divide"></el-divider>
    <div v-html="commodityDetail"></div>
  </el-card>
</template>

<script>
import marked from 'marked'
export default {
  data () {
    return {
      // 该商品的全部信息
      commodityList: {},
      // 商品详情
      commodityDetail: ''
    }
  },
  created () {
    // 从url中获取商品id
    const goodsId = this.$route.query.id
    // 获取指定id的商品信息
    this.getCommodityList(goodsId)
  },
  methods: {
    // 获取商品列表
    async getCommodityList (goodsId) {
      const { data: res } = await this.$http.get('Commodities/id/' + goodsId)
      if (res.meta.status !== 200) {
        // 获取商品列表失败
        this.$message.error('商品列表获取失败！')
      } else {
        // 获取商品列表成功
        this.commodityList = res.data.commodities
        // 将返回的数据中的commodities商品详情赋值给commodityDetail
        this.commodityDetail = marked(res.data.commodities.commodityDetails)
      }
    }
  }
}
</script>

<style scoped>
/* 产品参数信息下面那条红色分割线 */
.divide {
  width: 4rem;
  background-color: rgb(255, 0, 0);
}
</style>